/*
 * @Author: wwssaabb
 * @Date: 2021-01-22 14:44:05
 * @LastEditTime: 2021-02-23 10:33:19
 * @FilePath: \sass_demo\Text effects\js\demo.js
 */


let str="SWORD ART ONLINE"
let letterArr=str.split('')
let m=Math.floor(letterArr.length/2)
let content=document.getElementsByClassName('content')[0]
let wrap=document.createElement('div')
wrap.className="wrap"
for (let i = 0; i < letterArr.length; i++) {
  let letter=window.document.createElement('span')
  letter.className="letter"
  letter.innerText=letterArr[i]
  letter.style.animationDelay=(0.05*Math.abs(m-i))+'s';
  letter.style.animationFillMode="forwards";
    letter.addEventListener('animationend',()=>{
      letter.className='letter_end'
      letter.style.animationDelay=(0.1*Math.abs(m-i))+'s';

    })
  wrap.appendChild(letter)
}
content.appendChild(wrap)
